<template>
  <div class="dp-index">
    <nav-header></nav-header>
    <div class="index-box">
      <div class="index-left">
        <div class="left-one">
          <div class="title-box">
            <p>环境监测</p>
            <span>environmental monitoring</span>
          </div>
          <div class="left-one-con">
            <div class="left-one-item">
              <img src="../../assets/images/one1.png" alt="" />
              <div class="left-one-text">
                <span class="left-one-title">风向</span>
                <p>{{ wind.wind_direction }}</p>
              </div>
            </div>
            <div class="left-one-item">
              <img src="../../assets/images/one2.png" alt="" />
              <div class="left-one-text">
                <span class="left-one-title">风速</span>
                <p>{{ wind.wind_speed }} <span>m/s</span></p>
              </div>
            </div>
            <div class="left-one-item">
              <img src="../../assets/images/one3.png" alt="" />
              <div class="left-one-text">
                <span class="left-one-title">温度</span>
                <p>{{ air.air_tem?air.air_tem.toFixed(1):'' }} <span>°C</span></p>
              </div>
            </div>
            <div class="left-one-item">
              <img src="../../assets/images/one4.png" alt="" />
              <div class="left-one-text">
                <span class="left-one-title">湿度</span>
                <p>{{ air.air_hum }} <span>%</span></p>
              </div>
            </div>
          </div>
        </div>
        <div class="left-two">
          <div class="title-box">
            <p>天线偏移轨迹</p>
            <span>Iron tower trajectory</span>
          </div>
          <div id="main" style="width: 100%; height: 250px"></div>
        </div>
        <div class="left-three">
          <div class="title-box">
            <p>拉线监测数据</p>
            <span>Cable monitoring data</span>
          </div>
          <div class="three-list">
            <div
              class="three-item"
              v-for="(item, index) in threeList"
              :key="index"
            >
              <div class="three-l">{{ item }}</div>
              <p>{{ pull.pull_value }}</p>
              <span :class="{ green: index % 2 == 0, red: index % 2 != 0 }"
                >0.77</span
              >
              <i class="el-icon-caret-top" v-if="index % 2 == 0" />
              <i class="el-icon-caret-bottom" v-else />
            </div>
          </div>
        </div>
        <div class="left-five">
          <div class="title-box">
            <p>曲线分析</p>
            <span>Curve Analysis</span>
          </div>
          <div class="five-teb">
            <span
              v-for="(item, index) in fiveTeb"
              :key="index"
              :class="{ active: index == tebInx }"
              @click="changeTeb(index)"
              >{{ item }}</span
            >
          </div>
          <div id="five" style="width: 100%; height: 250px"></div>
        </div>
      </div>
      <div class="index-center">
        <div class="center-top">
          <p>当前风险等级<span>良好</span></p>
          <div class="tip">数据刷新频率30s，更新时间:{{ air.air_now }}</div>
        </div>
        <div class="center-box">
          <div ref="threeCanvas" style="width: 90%; height: calc(100% - 80px);"></div>
          <!-- <img src="../../assets/images/ta1.png" alt="" /> -->
        </div>
        <div class="center-bottom">
            <div class="print-text">
                <img src="../../assets/images/print.png" alt="">
                <span>经度：{{ gps.gps_zt==1?'定位失败':gps.gps_lon }}</span>
            </div>
            <div class="print-text">
                <img src="../../assets/images/print1.png" alt="">
                <span>纬度：{{ gps.gps_zt==1?'定位失败':gps.gps_lat }}</span>
            </div>
            <div class="type-text">直立塔</div>
        </div>
      </div>
      <div class="index-left">
        <div class="right-three">
            <div class="title-box">
                <p>实时数据</p>
                <span>Real-time data</span>
            </div>
            <div class="right-three-list">
              <div class="right-three-item">
                <img src="../../assets/images/jc1.png" alt="" />
                <div class="right-three-text">
                  <span>平均偏移</span>
                  <p>{{ pull.pull_value }} <span>mm</span></p>
                </div>
              </div>
              <div class="right-three-item">
                <img src="../../assets/images/jc2.png" alt="" />
                <div class="right-three-text">
                  <span>俯仰角</span>
                  <p>{{ dip.dip_pitch }} <span>度</span></p>
                </div>
              </div>
              <div class="right-three-item">
                <img src="../../assets/images/jc3.png" alt="" />
                <div class="right-three-text">
                  <span>方位角</span>
                  <p>{{ dip.dip_azimuth }} <span>度</span></p>
                </div>
              </div>
            </div>
            <div class="title2">
              <img src="../../assets/images/icon1.png" alt="">
              <span>塔基沉降</span>
            </div>
            <div class="settlement">
              <div class="settlement-item">
                <div class="settlement-left">
                  <img src="../../assets/images/c-bg.png" alt="">
                  <span>1</span>
                </div>
                <div class="settlement-right">
                  <p>{{ Math.trunc(subside.subside_one/10) }}<span>cm</span></p>
                  <span>沉降</span>
                </div>
              </div>
              <div class="settlement-item">
                <div class="settlement-left">
                  <img src="../../assets/images/c-bg.png" alt="">
                  <span>2</span>
                </div>
                <div class="settlement-right">
                  <p>{{ Math.trunc(subside.subside_two/10) }} <span>cm</span></p>
                  <span>沉降</span>
                </div>
              </div>
              <div class="settlement-item">
                <div class="settlement-left">
                  <img src="../../assets/images/c-bg.png" alt="">
                  <span>3</span>
                </div>
                <div class="settlement-right">
                  <p>{{ Math.trunc(subside.subside_three/10) }} <span>cm</span></p>
                  <span>沉降</span>
                </div>
              </div>
              <div class="settlement-item">
                <div class="settlement-left">
                  <img src="../../assets/images/c-bg.png" alt="">
                  <span>4</span>
                </div>
                <div class="settlement-right">
                  <p>{{ Math.trunc(subside.subside_four/10) }} <span>cm</span></p>
                  <span>沉降</span>
                </div>
              </div>
            </div>
            <div class="title2">
              <img src="../../assets/images/icon1.png" alt="">
              <span>接地电阻：{{resistance.resistance_value}}Ω</span>
            </div>
            <!-- <div class="four-con">
              <img src="../../assets/images/three.png" alt="" />
              <p>0.61</p>
              <span>Ω</span>
            </div> -->
        </div>
        <div class="right-one">
          <div class="title-box">
            <p>视频监测</p>
            <span>video monitoring</span>
          </div>
          <div class="right-video">
            <video src="../../assets/video.mp4" controls autoplay loop muted></video>
          </div>
        </div>
        <div class="right-two">
            <div class="title-box">
                <p>设备运行状态</p>
                <span>Equipment operation status</span>
            </div>
            <el-table
            :data="equipmentList"
            stripe
            height="250"
            style="width: 100%">
            <el-table-column
            prop="updateTime"
            label="时间" width="160">
            </el-table-column>
            <el-table-column
            prop="equipmentName"
            label="采集设备" width="150">
            </el-table-column>
            <el-table-column
            prop="equipmentLocation"
            label="安装高度(m)">
            </el-table-column>
            <el-table-column
            prop="level"
            label="状态"
            width="50">
            <template slot-scope="scope">
                <span v-if="scope.row.status == '0'" style="color:#02D081">正常</span>
                <span v-else style="color:#FF0000">异常</span>
            </template>
            </el-table-column>
        </el-table>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import navHeader from "./components/navHeader.vue";
import {getData,listEquipment,listDip} from "@/api/dpindex";
import { listWind } from "@/api/system/wind";
import { listAir } from "@/api/system/air";
import { listSubside } from "@/api/system/subside";
import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
export default {
  name: "dpIndex",
  components: {
    navHeader,
  },
  data() {
    return {
      chart: null,
      threeList: ["A1"],
      fiveTeb: ["风速m/s", "风力m/s", "温度°C", "湿度%", "沉降mm"],
      tebInx: 0,
      chart1: null,
      equipmentList:[],
      air:{
        air_tem:0,
        air_hum:'-'
      },
      dip:{},
      distance:{},
      gps:{},
      pull:{},
      resistance:{},
      subside:{},
      wind:{
        wind_direction:'-',
        wind_speed:'-'
      },
      timeOut: null,
    };
  },
  mounted() {
    this.getOne()
    this.getList()
    this.$nextTick(() => {
      this.initChart();
      this.initChart1(0);
    });
    this.initThreeJS();
    this.timeOut = setInterval(() => {
      this.getOne()
      this.getList()
      this.initChart();
      this.initChart1(0);
    },30000)
  },
  beforeDestroy() {
    clearInterval(this.timeOut)
  },
  created() {
    
  },
  methods: {
    initThreeJS() {
      const width = this.$refs.threeCanvas.clientWidth;
      const height = this.$refs.threeCanvas.clientHeight;
      const scene = new THREE.Scene();
      const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
      const renderer = new THREE.WebGLRenderer();
      renderer.setClearColor(0x000000, 0); // 设置为透明，第二个参数为透明度（alpha）
      renderer.setSize(width, height);
      const ambientLight = new THREE.AmbientLight(0xffffff, 1);
      scene.add(ambientLight);
      const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
      directionalLight.position.set(5, 5, 5);
      scene.add(directionalLight);
      
      const controls = new OrbitControls(camera, renderer.domElement);
      camera.position.z = 5;
      controls.update(); // 更新控制器状态

      this.$refs.threeCanvas.appendChild(renderer.domElement);
      const loader = new GLTFLoader();
      loader.load(
        'models/new.glb', // GLTF model path
        (gltf) => {
          const material = new THREE.MeshStandardMaterial({ color: 0xffffff }); // 绿色
          gltf.scene.traverse(function(child) {
              if (child.isMesh) {
                  child.material = material;
              }
          });
          scene.add(gltf.scene);
          gltf.scene.rotation.x = Math.PI/-2; 
          gltf.scene.position.set(0, 0.9, 0);
          gltf.scene.scale.set(0.085, 0.085, 0.085);
        },
        undefined,
        (error) => {
          console.error(error);
        }
      );
 
      camera.position.z = 5;
      const animate = function () {
        requestAnimationFrame(animate);
        renderer.render(scene, camera);
      };
      animate();
    },
    async getOne(){
      let that=this
      await getData().then(res => {
        if(res.code==200){
          if(res.data.air){
            that.air= res.data.air
          }
          if(res.data.dip){
            that.dip= res.data.dip
          }
          if(res.data.distance){
            that.distance= res.data.distance
          }
          if(res.data.gps){
            that.gps= res.data.gps
          }
          if(res.data.pull){
            that.pull= res.data.pull
          }
          if(res.data.resistance){
            that.resistance= res.data.resistance
          }
          if(res.data.subside){
            that.subside= res.data.subside
          }
          if(res.data.wind){
            that.wind= res.data.wind
          }
        }
        console.log(that.subside)
      })
    },
    async getList(){
      let queryParams={
        pageNum: 1,
        pageSize: 10,
      }
      await listEquipment(queryParams).then(response => {
        this.equipmentList = response.rows;
      })
    },
    initChart() {
      this.chart = echarts.init(document.getElementById("main"));
      let queryParams={
        pageNum: 1,
        pageSize: 7,
      }
      listDip(queryParams).then(response => {
        let oneList=[]
        let twoList= []
        let time=[]
        if(response.rows.length>0){
          response.rows.forEach(item => {
            oneList.push(item.pitch)
            twoList.push(item.azimuth)
            const match = item.createTime.match(/\s(\d{2}:\d{2}:\d{2})/);
            time.push(match ? match[1] : item.createTime);
          })
          let chartData={
            expectedData: oneList,
            actualData: twoList,
            time: time
          }
          this.setOptions(chartData);
        }
      });
    },
    setOptions({ expectedData, actualData,time } = {}) {
      this.chart.setOption({
        grid: {
          left: 10,
          right: 20,
          bottom: 20,
          top: 30,
          containLabel: true,
        },
        legend: {
          data: ["俯仰角", "方位角"],
          textStyle: {
            color:'#fff'
          }
        },
        textStyle: {
          color: "#fff",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
          },
        },
        xAxis: {
          type: "category",
          splitLine: {
            show: false,
          },
          axisLabel: {
              show: true,
              rotate: 20,//35度角倾斜显示
          },
          axisLine: {
            lineStyle: {
              color: "#2F5A8D", // 设置坐标轴颜色为蓝色
              width: 2,
              type: "solid",
            },
          },
          data: time,
        },
        yAxis: [
          {
            type: "value",
            name: "俯仰角",
            position: "left",
            alignTicks: true,
            splitNumber: 3,
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(255,255,255,0.2)", // 设置分割线颜色为蓝色
                width: 1,
                type: "solid",
              },
            },
            axisLabel: {
              formatter: "{value} °",
            },
          },
          {
            type: "value",
            name: "方位角",
            position: "right",
            alignTicks: true,
            splitNumber: 3,
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(255,255,255,0.2)", // 设置分割线颜色为蓝色
                width: 1,
                type: "solid",
              },
            },
            axisLabel: {
              formatter: "{value} °",
            },
          },
        ],
        series: [
          {
            name: "俯仰角",
            type: "line",
            data: expectedData,
            xAxisIndex: 0,
            yAxisIndex: 0,
            itemStyle: {
              color: "#02D081",
            },
          },
          {
            name: "方位角",
            type: "line",
            xAxisIndex: 0,
            yAxisIndex: 1,
            data: actualData,
            itemStyle: {
              color: "#FFDD00",
            },
          },
        ],
      });
    },
    changeTeb(inx){
      this.tebInx = inx
      this.chart1.dispose();
      this.chart1 = null;
      this.initChart1(inx)
    },
    initChart1(inx) {
      const queryParams= {
        pageNum: 1,
        pageSize: 7,
      }
      let chartData = {}
      this.chart1 = echarts.init(document.getElementById("five"));
      if(inx==0||inx==1){
        listWind(queryParams).then(response => {
          let oneList=[]
          let twoList=[]
          let time= []
          if(response.rows.length>0){
            response.rows.forEach(item => {
              oneList.push(item.windSeep)
              twoList.push(item.windPower)
              const match = item.createTime.match(/\s(\d{2}:\d{2}:\d{2})/);
              time.push(match ? match[1] : item.createTime);
            })
            chartData={
              expectedData: inx==0?oneList:twoList,
              time: time
            }
            this.setOptions1(chartData);
          }
        });
      }else if(inx==2||inx==3){
        listAir(queryParams).then(response => {
          let oneList=[]
          let twoList= []
          let time= []
          if(response.rows.length>0){
            response.rows.forEach(item => {
              oneList.push(item.airTemp)
              twoList.push(item.airHum)
              const match = item.createTime.match(/\s(\d{2}:\d{2}:\d{2})/);
              time.push(match ? match[1] : item.createTime);
            })
            chartData={
              expectedData: inx==2?oneList:twoList,
              time: time
            }
            this.setOptions1(chartData);
          }
        });
      }else if(inx==4){
        listSubside(queryParams).then(response => {
          let oneList=[]
          let time= []
          if(response.rows.length>0){
            response.rows.forEach(item => {
              oneList.push(item.subsideOne)
              const match = item.createTime.match(/\s(\d{2}:\d{2}:\d{2})/);
              time.push(match ? match[1] : item.createTime);
            })
            chartData= {
              expectedData: oneList,
              time:time
            }
            this.setOptions1(chartData);
          }
        });
      }
    },
    setOptions1({expectedData,time}={}) {
      this.chart1.setOption({
        grid: {
          left: 10,
          right: 10,
          bottom: 20,
          top: 30,
          containLabel: true,
        },
        textStyle: {
          color: "#86909C",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
          },
        },
        xAxis: {
          type: "category",
          axisLabel: {
              show: true,
              rotate: 20,//35度角倾斜显示
          },
          axisLine: {
            lineStyle: {
              color: "#fff", // 设置坐标轴颜色为蓝色
              width: 1,
              type: "solid",
            },
          },
          axisTick: {
            show: false, // 隐藏 X 轴的刻度线
          },
          data: time,
        },
        yAxis: {
          type: "value",
          splitNumber: 3,
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(255,255,255,0.8)", // 设置分割线颜色为蓝色
              width: 1,
              type: "dashed",
            },
          },
        },
        series: [
          {
            data: expectedData,
            type: "line",
            smooth: true,
            showSymbol: false,
            lineStyle: {
              color: "#02D081", // 设置线的颜色为红色
            },
            itemStyle: {
              color: "#02D081",
            },
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(35, 222, 11,0.2)",
                },
                {
                  offset: 1,
                  color: "rgba(26, 255, 22,0)",
                },
              ]),
            },
          },
        ],
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.dp-index {
  width: 100%;
  height: 100%;
  background: url("../../assets/images/map1.png") no-repeat;
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  .index-box {
    width: 100%;
    height: calc(100% - 80px);
    padding: 20px 30px;
    box-sizing: border-box;
    overflow-y: auto;
    display: flex;
    flex:1;
    justify-content: space-between;
    .title-box {
      width: 100%;
      background: url("../../assets/images/title-bg.png") 0 0 no-repeat;
      display: flex;
      align-items: center;
      padding-left: 50px;
      margin-bottom: 20px;
      p {
        padding: 0;
        font-size: 22px;
        color: #fff;
        font-family: "youshe";
        margin: 0 20px 0 0;
      }
      span {
        font-size: 12px;
        text-transform: uppercase;
        color: #8ec7ff;
      }
    }
    .index-left {
      width: 25%;
      .left-one {
        width: 100%;
        .left-one-con {
          width: 100%;
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          .left-one-item {
            width: 48%;
            height: 50px;
            background: url("../../assets/images/one-bg1.png") no-repeat;
            background-size: 100% 100%;
            display: flex;
            align-items: center;
            padding: 0 20px;
            box-sizing: border-box;
            margin-bottom: 20px;
            &:nth-child(2) {
              background: url("../../assets/images/one-bg2.png") no-repeat;
              background-size: 100% 100%;
              p {
                color: #eed263 !important;
              }
            }
            &:nth-child(3) {
              background: url("../../assets/images/one-bg3.png") no-repeat;
              background-size: 100% 100%;
              p {
                color: #7ae7c3 !important;
              }
            }
            &:nth-child(4) {
              background: url("../../assets/images/one-bg4.png") no-repeat;
              background-size: 100% 100%;
              p {
                color: #74e990 !important;
              }
            }
            img {
              width: 35px;
              height: 35px;
              margin-right: 20px;
            }
            .left-one-text {
              .left-one-title {
                font-size: 14px;
                color: #fff;
              }
              p {
                font-size: 18px;
                color: #6eccee;
                margin: 0;
                font-weight: 500;
                padding: 0;
                span {
                  font-size: 12px;
                }
              }
            }
          }
        }
      }
      .left-two {
        width: 100%;
      }
      .left-three {
        width: 100%;
        .three-list {
          width: 100%;
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          .three-item {
            width: 48%;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            .three-l {
              width: 34px;
              height: 34px;
              background: url("../../assets/images/two.png") no-repeat;
              background-size: 100% 100%;
              display: flex;
              align-items: center;
              justify-content: center;
              margin-right: 10px;
              font-family: "dinr";
              font-size: 16px;
              color: #fff;
            }
            p {
              font-family: "dinb";
              margin: 0 10px 0 0;
              padding: 0;
              font-size: 22px;
              font-weight: bold;
              line-height: 18px;
              letter-spacing: 0px;
              font-variation-settings: "opsz" auto;
              background: linear-gradient(0deg, #29f1fa 0%, #bbfcff 100%);
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
              background-clip: text;
              text-fill-color: transparent;
            }
            span {
              font-size: 12px;
            }
            .green {
              color: #5bff00;
            }
            .red {
              color: #ff0000;
            }
            .el-icon-caret-top {
              color: #5bff00;
            }
            .el-icon-caret-bottom {
              color: #ff0000;
            }
          }
        }
      }
      .left-five {
        width: 100%;
        .five-teb {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 10px;
          box-sizing: border-box;
          span {
            display: block;
            background: linear-gradient(
              180deg,
              rgba(15, 74, 159, 0) 0%,
              rgba(17, 75, 160, 0.95) 319%
            );
            box-sizing: border-box;
            border: 1px solid rgba(0, 45, 89, 0.8);
            font-size: 12px;
            color: rgba(216, 240, 255, 0.5);
            line-height: 20px;
            padding: 0 15px;
            cursor: pointer;
          }
          .active {
            color: #d8f0ff;
            background: linear-gradient(
              180deg,
              rgba(15, 74, 159, 0) 0%,
              rgba(17, 75, 160, 0.95) 137%
            );
            box-sizing: border-box;
            border: 1px solid rgba(30, 123, 214, 0.8);
          }
        }
      }
      .right-one{
        width: 100%;
        margin-bottom: 20px;
        .right-video{
            width: 100%;
            video{
                width: 100%;
                height: 200px;
                object-fit: cover;
            }
        }
      }
      .right-two{
        width: 100%;
        ::v-deep .el-table{
          background-color: rgba(0,0,0,0) !important;
          color:#fff;
          scrollbar-color: #021A41 lightblue;
        }
        ::v-deep .el-table tr{
          background-color: rgba(0,0,0,0) !important;
        }
        ::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell{
          background: rgba(21, 77, 160, 0.2) !important;
        }
        ::v-deep .el-table td.el-table__cell{
          border-bottom: none !important;
        }
        ::v-deep .el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th{
          background: rgba(21, 77, 160, 0.2) !important;
          color: #fff;
          border-bottom: none !important;
        }
        ::v-deep .el-table::before{
          height: 0 !important;
        }
        ::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
          background:  rgba(69, 193, 255, 0.6) !important;
        }
      }
      .right-three{
        width: 100%;
        .title2{
          display: flex;
          align-items: center;
          margin-bottom: 20px;
          img{
            width: 24px;
            height: 24px;
            display: block;
            margin-right: 10px;
          }
          span{
            display: block;
            width: 70%;
            background: url('../../assets/images/t-bg.png') no-repeat;
            color: #fff;
            font-size: 14px;
            line-height: 24px;
            padding-left: 10px;
            box-sizing: border-box;
          }
        }
        .right-three-list{
          width: 100%;
          display: flex;
          align-items: center;
          margin-bottom: 20px;
          .right-three-item{
            display: flex;
            align-items: center;
            margin-right: 40px;
            img{
              width: 40px;
              height: 40px;
              display: block;
              margin-right: 10px;
            }
            span{
              font-size: 12px;
              color: rgba(255, 255, 255, 0.64);
            }
            p{
              font-family: 'dinb';
              font-size: 20px;
              color: #fff;
              margin: 0;
            }
          }
        }
        .four-con {
          width: 100%;
          display: flex;
          align-items: flex-end;
          padding: 0 30px;
          box-sizing: border-box;
          margin-bottom: 20px;
          p {
            margin: 0 10px;
            font-size: 22px;
            font-family: "dinr";
            color: #d8f0ff;
            line-height: 22px;
          }
          span {
            font-size: 12px;
            color: #d8f0ff;
          }
        }
        .settlement{
          width: 100%;
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          margin-bottom: 10px;
          padding: 0 20px;
          box-sizing: border-box;
          .settlement-item{
            width: 45%;
            display: flex;
            align-items: center;
            margin-right: 20px;
            margin-bottom: 10px;
            .settlement-left{
              margin-right: 10px;
              position: relative;
              margin-right: 10px;
              span{
                font-size: 14px;
                color: #fff;
                position: absolute;
                right: 5px;
                bottom: 5px;
              }
            }
            .settlement-right{
              p{
                font-family: 'dinb';
                font-size: 20px;
                color: #fff;
                margin: 0;
              }
              span{
                font-size: 12px;
                color: #8AC0FF;
              }
            }
          }
        }
      }
    }
    .index-center {
      width: 50%;
      position: relative;
      .center-top {
        width: 660px;
        height: 70px;
        margin: 0 auto;
        background: url("../../assets/images/top-bg.png") no-repeat;
        background-size: 100% 100%;
        position: relative;
        .tip{
          width: 100%;
          position: absolute;
          left: 0;
          bottom: 8px;
          font-size: 12px;
          color: #fff;
          padding: 0 10px;
          border-radius: 5px;
          text-align: center;
        }
        p {
          font-family: "ZCoolGao";
          text-align: center;
          margin: 0;
          font-size: 24px;
          color: #fff;
          line-height: 47px;
          span {
            color: #00ff9d;
          }
        }
      }
      .center-box {
        width: 100%;
        height: 92%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 20px;
        img {
          width: 300px;
          display: block;
        }
      }
      .center-bottom{
        position: absolute;
        bottom: 40px;
        right: 80px;
        color: #fff;
        font-size: 12px;
        z-index: 9;
        img{
            display: inline-block;
            margin-right: 5px;
        }
        .type-text{
          width: 80px;
          font-size: 14px;
          margin: 20px auto;
          background: rgba(255,255,255,0.5);
          color: #021A41;
          border-radius: 10px;
          text-align: center;
          padding: 3px 0;
        }
      }
    }
  }
}
</style>
